<!-- Licensed under a BSD license. See license.html for license -->
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <title addtitletodoc="false">WebGL - Resize canvas to fill the screen</title>
  <link type="text/css" href="../../resources/webgl-tutorials.css" rel="stylesheet" />
  <style>
    body {
      margin: 0;
      background-color: white;
    }

    canvas {
      display: block;
      /* prevents scrollbar */
      width: 100vw;
      height: 100vh;
    }
  </style>
</head>

<body>
  <div id="info">
    <a href="https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-resizing-the-canvas.html" target="_blank">WebGL -
      重置画布尺寸</a>
  </div>
  <canvas id="canvas"></canvas>
</body>
<!-- vertex shader -->
<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;

uniform mat3 u_matrix;

void main() {
  // Multiply the position by the matrix.
  gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);
}
</script>
<!-- fragment shader -->
<script id="2d-fragment-shader" type="x-shader/x-fragment">
precision mediump float;

uniform vec4 u_color;

void main() {
   gl_FragColor = u_color;
}
</script>
<!--
for most samples webgl-utils only provides shader compiling/linking and
canvas resizing because why clutter the examples with code that's the same in every sample.
See http://webglfundamentals.org/webgl/lessons/webgl-boilerplate.html
and http://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
for webgl-utils, m3, m4, and webgl-lessons-ui.
-->
<script src="../../resources/webgl-utils.js"></script>
<script src="../../resources/m3.js"></script>
<script>
  "use strict";

  function main() {
    // Get A WebGL context
    /** @type {HTMLCanvasElement} */
    var canvas = document.getElementById("canvas");
    var gl = canvas.getContext("webgl");
    if (!gl) {
      return;
    }

    // setup GLSL program
    var program = webglUtils.createProgramFromScripts(gl, ["2d-vertex-shader", "2d-fragment-shader"]);
    gl.useProgram(program);

    // look up where the vertex data needs to go.
    var positionAttributeLocation = gl.getAttribLocation(program, "a_position");

    // lookup uniforms
    var colorLocation = gl.getUniformLocation(program, "u_color");
    var matrixLocation = gl.getUniformLocation(program, "u_matrix");

    // Create a buffer to put three 2d clip space points in
    var positionBuffer = gl.createBuffer();

    // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

    requestAnimationFrame(drawScene);

    // Draw the scene.
    function drawScene(now) {
      now *= 0.001; // convert to seconds

      resize(gl.canvas);

      // Clear the canvas.
      gl.clear(gl.COLOR_BUFFER_BIT);

      // Tell it to use our program (pair of shaders)
      gl.useProgram(program);

      // Turn on the attribute
      gl.enableVertexAttribArray(positionAttributeLocation);

      // Bind the position buffer.
      gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

      // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
      var size = 2;          // 2 components per iteration
      var type = gl.FLOAT;   // the data is 32bit floats
      var normalize = false; // don't normalize the data
      var stride = 0;        // 0 = move forward size * sizeof(type) each iteration to get the next position
      var offset = 0;        // start at the beginning of the buffer
      gl.vertexAttribPointer(
        positionAttributeLocation, size, type, normalize, stride, offset);

      // Set Geometry.
      var radius = Math.sqrt(gl.canvas.width * gl.canvas.width + gl.canvas.height * gl.canvas.height) * 0.5;
      var angle = now;
      var x = Math.cos(angle) * radius;
      var y = Math.sin(angle) * radius;
      var centerX = gl.canvas.width / 2;
      var centerY = gl.canvas.height / 2;
      setGeometry(gl, centerX + x, centerY + y, centerX - x, centerY - y);

      // Compute the matrices
      var projectionMatrix = m3.projection(gl.canvas.width, gl.canvas.height);

      // Set the matrix.
      gl.uniformMatrix3fv(matrixLocation, false, projectionMatrix);

      // Draw in red
      gl.uniform4fv(colorLocation, [1, 0, 0, 1]);

      // Draw the geometry.
      var primitiveType = gl.LINES;
      var offset = 0;
      var count = 2;
      gl.drawArrays(primitiveType, offset, count);

      requestAnimationFrame(drawScene);
    }

    function resize(canvas) {
      // Lookup the size the browser is displaying the canvas.
      var displayWidth = canvas.clientWidth;
      var displayHeight = canvas.clientHeight;

      // Check if the canvas is not the same size.
      if (canvas.width !== displayWidth ||
        canvas.height !== displayHeight) {

        // Make the canvas the same size
        canvas.width = displayWidth;
        canvas.height = displayHeight;
      }
    }
  }

  // Fill the buffer with a line
  function setGeometry(gl, x1, y1, x2, y2) {
    gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([
        x1, y1,
        x2, y2]),
      gl.STATIC_DRAW);
  }

  main();
</script>

</html>